<template>
  <div class="tab_user">
    <div class="city">{{ user.city ? user.city.slice(0, 2) : '' }}</div>
    <div class="">
      <div class="name" @click="lookDetail">
        <span class="sp1" :title="user.hospitalName">{{ user.hospitalName && user.hospitalName.length > 12 ? (user.hospitalName.slice(0, 12) + '...') : (user.hospitalName || '') }}</span>
        <div class="tag_list" v-if="show">
          <el-tag class="tag" type="danger" size="mini" v-if="user.medicalInsurancePolicy == 1">支持医保</el-tag>
          <el-popover placement="right" trigger="hover" v-if="user.activityPricingStrategy">
            <div class="el_popover_box" v-html="user.activityPricingStrategy">
            </div>
            <el-tag slot="reference" class="tag" size="mini">活动政策</el-tag>
          </el-popover>
        </div>
      </div>
      <div class="mobile">
        {{ user.hospitalAddress || '' }}
      </div>
    </div>
  </div>
</template>
<script>
import { broadcast } from "@/common/util";
export default {
  name: "TabHospital",
  props: {
    user: {
      type: Object,
      default: () => {
        return {};
      },
    },
    show: {
      type: Boolean,
      default: true,
    },
    disabled: {
      type: Boolean,
      default: false,
    },
    hidden: {
      type: Boolean,
      default: false,
    },
    url:{
      type:String,
      default:'hospital/all/add'
    }
  },
  data() {
    return {
      showDialog: false,
    };
  },
  mounted() { },
  methods: {
    // 查看医院信息
    lookDetail() {
      if (this.disabled) {
        return false;
      }
      let row = this.user;
      let o = window.location.origin;
      //broadcast("userDetail", row);
      let path = `${o}/#/${this.url}?id=${row.id}&status=${3}&hidden=${this.hidden}`
      window.open(path)
      // this.$router.push({
      //   name: "addHospital",
      //   query: { id: row.id, status: 3 },
      // });
    },
  },
};
</script>
<style lang="scss" scoped>
.tab_user {
  display: flex;
  align-items: center;
  cursor: pointer;
  width: 100%;

  .city {
    min-width: 32px;
    height: 32px;
    background: #167fff;
    border-radius: 4px;
    font-size: 14px;
    font-family: PingFang SC-Regular, PingFang SC;
    font-weight: 400;
    color: #ffffff;
    text-align: center;
    line-height: 32px;
    margin-right: 7px;
  }

  .name {
    display: flex;
    align-items: center;
    font-size: 14px;
    font-family: PingFang SC-Medium, PingFang SC;
    font-weight: 500;
    color: #167fff;

    .sp1 {
      flex-shrink: 0;
    }

    .tag_list {
      flex: 1;
      flex-shrink: 0;
      display: flex;
      align-items: center;

      .tag {
        margin: 0 4px;
      }
    }
  }

  .mobile {
    font-size: 12px;
    font-family: DIN-Regular, DIN;
    font-weight: 400;
    color: #999999;
  }
}

.dialog_btn {
  .btn {
    width: 88px;
    height: 32px;
    border-radius: 4px;
    border: 0;
    font-size: 14px;
    font-family: PingFang SC-Regular, PingFang SC;
    font-weight: 400;
    cursor: pointer;
    margin-left: 16px;
  }

  .btn:hover {
    opacity: 0.8;
  }

  .btn_primary {
    background: #cce2ff;
    color: #167fff;
  }

  .btn_warning {
    background: #ffe3cc;
    color: #ff8f2e;
  }

  .btn_danger {
    background: #ffcccc;
    color: #ff5e59;
  }
}

.el_popover_box {
  max-height: 300px;
  overflow-y: auto;
}
</style>